<template>
    <div class="go-top-area" @click="goTop" :style="{visibility: (showGoTop?'visible':'hidden')}">
        <image :src="goTopIco" resize="stretch" class="to-top-ico"></image>
    </div>
</template>

<style scoped>
    .go-top-area {
        position: absolute;
        bottom: 60px;
        right: 25px;
        width: 90px;
        height: 90px;
        align-items: center;
        justify-content: center;
    }
    .to-top-ico {
        width: 70px;
        height: 70px;
    }
</style>

<script>
    import goTopIco from 'assets/images/go-top.png';
    const dom = weex.requireModule('dom');

    export default{
        props: {
            /**dom滚到的位置节点*/
            refEl: {
                default: null,
                required: true
            },
            /**是否显示一键置顶按钮*/
            showGoTop: {
                required: true,
                type: Boolean
            },
            isFixedNode: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return{
                goTopIco: goTopIco
            }
        },
        methods: {
            goTop(e) {
                let vm = this.$parent;
                while(vm.$parent && !this.getNode(vm)){
                    vm = vm.$parent;
                }

                let el = this.getNode(vm);
                dom.scrollToElement(el, {offset: 0, animated:false});
                vm.showGoTop = false;//关闭一键置顶按钮
            },
            getNode(vm){
                return this.isFixedNode ? vm.$refs[this.refEl] : vm.$refs[this.refEl][0];
            }
        }
    }
</script>
